import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:flutter_todo_2019/page/flags/todo_add_screen.dart';
import 'package:flutter_todo_2019/page/mode/todo_list_model.dart';
import 'package:flutter_todo_2019/page/utils/item_utils.dart';
import 'package:flutter_todo_2019/page/utils/route_util.dart';
import 'package:flutter_todo_2019/page/utils/theme_util.dart';
import 'package:flutter_todo_2019/res/colors.dart';
import 'package:sticky_headers/sticky_headers.dart';

class ItemTodoList extends StatefulWidget {
  /// TODO实体
  TodoBean item;

  /// 滑动删除Controller
  SlidableController slidableController;

  bool isShowSuspension = false;

  /// 待办类型
  int todoType;

  /// 是否是待办 true:待办  false:已完成
  bool isTodo = true;

  /// 更新TODO
  Function updateTodoCallback;

  /// 删除TODO
  Function deleteItemCallback;

  ItemTodoList(
      {this.isTodo,
      this.item,
      this.slidableController,
      this.isShowSuspension,
      this.todoType,
      this.updateTodoCallback,
      this.deleteItemCallback});

  @override
  State<StatefulWidget> createState() {
    return new ItemTodoListState();
  }
}

class ItemTodoListState extends State<ItemTodoList> {
  @override
  Widget build(BuildContext context) {
    var item = widget.item;
    bool isShowSuspension = widget.isShowSuspension;
    SlidableController slidableController = widget.slidableController;
    int todoType = widget.todoType;
    bool isTodo = widget.isTodo;

    return StickyHeader(
      header: Offstage(
        offstage: !isShowSuspension,
        child: Container(
          padding: EdgeInsets.fromLTRB(16, 0, 16, 0),
          alignment: Alignment.centerLeft,
          height: 28,
          color: ThemeUtils.dark ? Color(0xFF515151) : Colors.white,
          child: Text(
            item.dateStr,
            style: TextStyle(
                fontSize: 12, color: Colours.app_todo_item_title_color),
          ),
        ),
      ),
      content: Slidable(
        controller: slidableController,
        actionPane: SlidableDrawerActionPane(),
        actionExtentRatio: 0.25,
        child: InkWell(
            onTap: () {
              RouteUtil.push(
                  context,
                  TodoAddScreen(
                    todoType: todoType,
                    editKey: 1,
                    bean: item,
                  ));
            },
            child: Card(
                //带有圆角，阴影，边框等效果的卡片
                color: Colors.white,
                elevation: 8,
                shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(8.0))),
                margin: EdgeInsets.all(10),
                //设置圆角
                child: Container(
                  child: Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          ItemUtils.getLinearGradientView(),
                          Expanded(
                            child: Container(
                              padding: EdgeInsets.fromLTRB(20, 6, 12, 6),
                              child: Column(
                                children: <Widget>[
                                  Container(
                                    alignment: Alignment.topLeft,
                                    padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: <Widget>[
                                        Text(
                                          item.title,
                                          style: TextStyle(
                                              fontSize: 16,
                                              fontWeight: FontWeight.bold),
                                          maxLines: 1,
                                          overflow: TextOverflow.ellipsis,
                                          textAlign: TextAlign.left,
                                        ),
                                        Offstage(
                                          offstage: item.priority != 1,
                                          child: Container(
                                            decoration: new BoxDecoration(
                                              color: const Color(0xFFF2E5E6),
                                              border: new Border.all(
                                                  color: Color(0xFFFFCBC7),
                                                  width: 1),
                                              borderRadius:
                                                  new BorderRadius.circular(4),
                                            ),
                                            padding:
                                                EdgeInsets.fromLTRB(8, 2, 8, 2),
                                            margin:
                                                EdgeInsets.fromLTRB(0, 0, 2, 0),
                                            child: Text(
                                              "重要",
                                              style: TextStyle(
                                                  fontSize: 12,
                                                  color:
                                                      const Color(0xFFFF9191)),
                                              textAlign: TextAlign.left,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Divider(),
                                  Container(
                                    alignment: Alignment.topLeft,
                                    padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                                    child: Text(
                                      item.content,
                                      style: TextStyle(
                                          fontSize: 15,
                                          color: Color(0xFF757575)),
                                      maxLines: 2,
                                      overflow: TextOverflow.ellipsis,
                                      textAlign: TextAlign.left,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ))),
        secondaryActions: <Widget>[
          IconSlideAction(
            caption: isTodo ? '已完成' : '复原',
            color: isTodo
                ? Colours.app_todo_item_finish_color
                : Colours.app_todo_item_reset_color,
            icon: isTodo ? Icons.check : Icons.redo,
            onTap: () {
              widget.updateTodoCallback(item.id);
            },
          ),
          IconSlideAction(
            caption: '删除',
            color: Colours.app_todo_item_del_color,
            icon: Icons.delete,
            onTap: () {
              showDialog(
                context: context,
                builder: (context) => new AlertDialog(
                  // title: new Text(''),
                  content: new Text('确定删除吗？'),
                  actions: <Widget>[
                    new FlatButton(
                      onPressed: () => Navigator.of(context).pop(false),
                      child:
                          new Text('取消', style: TextStyle(color: Colors.cyan)),
                    ),
                    new FlatButton(
                      onPressed: () {
                        Navigator.of(context).pop(false);
                        widget.deleteItemCallback(item.id);
                      },
                      child:
                          new Text('确定', style: TextStyle(color: Colors.cyan)),
                    ),
                  ],
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}
